import React from 'react';
import {
  Map, MapApiLoaderHOC, MapvglView
} from 'react-bmapgl';
import setting from './setting';

const ak = 'Gop5SxCkLaE1wUHAks4TBQy55yhtbkyz';

function GroupDemo({
  height, width, config, children
}) {
  const getZoom = (zoom, minZoom, maxZoom) => {
    if (zoom < minZoom) return minZoom;
    if (zoom > maxZoom) return maxZoom;
    return zoom;
  };
  const {
    styleId, base: {
      lng, lat, zoom = 1, minZoom = 1, maxZoom = 12
    }
  } = config;
  return (
    <Map
      key={styleId}
      style={{ height, width }}
      center={{ lng, lat }}
      zoom={getZoom(zoom, minZoom, maxZoom)}
      mapStyleV2={{ styleId }}
      enableScrollWheelZoom
      enableRotate
      enableDragging
      enableDoubleClickZoom
    >
      <MapvglView>
        {children && children.map((item) => React.cloneElement(item, { ak }))}
      </MapvglView>
    </Map>
  );
}
const GroupDemoHOC = MapApiLoaderHOC({ ak })(GroupDemo);
GroupDemoHOC.setting = setting;
GroupDemoHOC.childrenCom = {
  custom_demo_group_map_traffic: () => import('./GroupMapTraffic'),
  custom_demo_group_map_geo: () => import('./GroupMapGeo'),
};
export default GroupDemoHOC;
